<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*左浮动：在父级元素内从左到右依次排列，一行放不下就会自动挤到下一行*/
        *{
            margin: 0;
            padding: 0;
        }
        .w{
            width: 800px;
            height:550px;
            background-color: #b0b0b0;
            margin: 0 auto;
        }
        /*如果有一个元素浮动了，其他元素也建议浮动*/
        /*如果浮动的子元素总宽度超过了父容器，最后一个浮动的元素会被挤到下一行*/
        .w .left{
            float: left;
            width: 600px;
            height: 100%;/*子元素高度填充满父元素（注意块级元素高度由内容撑起，没内容就自己设置高度）*/
            background-color: #ff6700;
        }
        .w .right{
            float:right;
            width:200px;
            height:100%;
            background-color: #333333;
        }

    </style>
</head>
<body>
<div class="w">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>